<template>
  <div id="root">
    <div class="ttp-sticky-container" style="top:0;left:0;z-index:200">
      <div role="banner" class="ttp-site-header-wrapper">
        <div class="ttp-site-header">
          <div class="channel-wrapper">
            <div class="feed-m-nav">
              <ul class="feed-default-nav">

                <li tabindex="0">
                  <div class="show-monitor" @click="searchByCid(-1)">
                    <div class="feed-default-nav-item ">推荐
                    </div>
                  </div>
                </li>
                <li tabindex="0" v-for="(item,index) in citems" :key="item.id + index">
                  <div class="show-monitor" @click="searchByCid(index)" >
                    <div  class="feed-default-nav-item ">{{ item.name}}
                    </div>
                  </div>
                </li>

              </ul>
            </div>
          </div>
          <div class="ttp-search-wrapper">
            <div class="search">
              <input type="text" aria-label="搜索" placeholder="" v-model.trim="keyword" >
              <button type="button" aria-label="搜索" @click="searchData"  ><i></i></button>
            </div>
          </div>
          <div style="margin-left:30px;flex-shrink:0">
            <div class="ttp-header-profile">

              <div class="user-icon"  v-if="usershow" >

                <img :src="user.avatar" alt="" @click.prevent="userInfo" >

                {{ user.nickname }}
                <div class="user-list"
                     :class="[userinfo ?'show':'']" >

                  <div class="user-list-content">

                    <router-link :to="{path:'/user',query:{curid:1} }" target="_blank"  class="title">
                      个人主页
                    </router-link>


                    <router-link :to="{path:'/user',query:{curid:2} }" target="_blank"  class="title">
                      我的收藏
                    </router-link>

                    <a href="//sso.toutiao.com/logout/" target="_blank" rel="noopener nofollow"  @click.prevent="loginOut" >退出登录</a></div>
                </div>

              </div>

              <a class="login-button" rel="nofollow" @click.prevent="loginShow" v-if="!usershow">登录</a>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div role="main" class="article-detail-container">
      <div class="left-sidebar">
        <div style="display: block;">
          <div style="display:block;width:0;height:0"></div>
          <div style="position: fixed; top: 164px; z-index: 200; transform: translateX(0px);">
            <div role="complementary" aria-label="工具栏" class="detail-side-interaction">

              <div tabindex="0" aria-pressed="false" class="detail-like" @click.prevent="dianzan" v-if="!iszan">
                <div class="digg-icon">
                  <div class="inner"><i></i></div>
                </div>
                <span v-if="item.zannum>0">{{ item.zannum }}</span>
                <span v-else>点赞</span>
              </div>
              <div tabindex="0" role="button" aria-pressed="true" class="detail-like like" @click.prevent="quxiaodianzan" v-if="iszan">
                <div class="digg-icon">
                  <div class="inner"><i></i></div>
                </div>
                <span v-if="item.zannum>0">{{ item.zannum }}</span>
                <span v-else>点赞</span>
              </div>

              <div class="divide"></div>
              <div tabindex="0" role="button"  class="detail-interaction-comment">
                <span v-if="total>0">{{total}}</span>
                <span v-else> 评论</span>
              </div>

              <div style="margin:20px 0" >
                <div tabindex="0" class="detail-interaction-collect" @click.prevent="shoucang" v-if="!isshou">
                  <div class="collect-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                         xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M12.448 18.0551C12.1658 17.9136 11.8334 17.9136 11.5513 18.0551L6.28528 20.6965C5.9852 20.847 5.64437 20.5832 5.71485 20.255L6.89736 14.7477C6.96955 14.4115 6.86391 14.0618 6.61765 13.8217L2.60748 9.91277C2.37007 9.68135 2.50108 9.27817 2.82916 9.23049L8.39769 8.42134C8.7234 8.37401 9.00496 8.16944 9.15062 7.8743L11.6409 2.82836C11.7877 2.53106 12.2116 2.53106 12.3583 2.82836L14.8487 7.8743C14.9943 8.16944 15.2759 8.37401 15.6016 8.42134L21.1701 9.23049C21.4982 9.27817 21.6292 9.68135 21.3918 9.91277L17.3816 13.8217C17.1354 14.0618 17.0297 14.4115 17.1019 14.7478L18.2846 20.255C18.3551 20.5832 18.0143 20.847 17.7142 20.6965L12.448 18.0551Z"></path>
                    </svg>
                  </div>
                  <span>收藏</span></div>
              </div>

              <div tabindex="0" class="detail-interaction-collect collected"  @click.prevent="quxiaoshoucang" v-if="isshou">
                <div class="collect-icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M12.448 18.0551C12.1658 17.9136 11.8334 17.9136 11.5513 18.0551L6.28528 20.6965C5.9852 20.847 5.64437 20.5832 5.71485 20.255L6.89736 14.7477C6.96955 14.4115 6.86391 14.0618 6.61765 13.8217L2.60748 9.91277C2.37007 9.68135 2.50108 9.27817 2.82916 9.23049L8.39769 8.42134C8.7234 8.37401 9.00496 8.16944 9.15062 7.8743L11.6409 2.82836C11.7877 2.53106 12.2116 2.53106 12.3583 2.82836L14.8487 7.8743C14.9943 8.16944 15.2759 8.37401 15.6016 8.42134L21.1701 9.23049C21.4982 9.27817 21.6292 9.68135 21.3918 9.91277L17.3816 13.8217C17.1354 14.0618 17.0297 14.4115 17.1019 14.7478L18.2846 20.255C18.3551 20.5832 18.0143 20.847 17.7142 20.6965L12.448 18.0551Z"></path>
                  </svg>
                </div>
                <span>已收藏</span></div>

            </div>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="show-monitor">
          <div class="article-content"><h1>{{ item.name }}</h1>
            <div class="article-meta"><span>{{ item.createTime }}</span><span class="dot">·</span><span class="name">
              <a href="#" target="_blank" rel="noopener nofollow">{{item.userName}}</a>
            </span></div>
            <article class="syl-article-base tt-article-content syl-page-article syl-device-pc">
              <div v-html="item.content"></div>
            </article>
          </div>
        </div>
        <div class="action">
          <div tabindex="0" role="button" aria-label="举报" class="detail-report"><i></i><span>举报</span></div>
        </div>
        <div style="margin:20px 0 40px">
          <div role="region" aria-label="评论区" class="ttp-comment-block">
            <div id="comment-area" class="ttp-comment-wrapper">
              <div class="title">评论 <span v>{{total}}</span></div>
              <div class="main-input" v-if="usershow">
                <div class="ttp-avatar auth-none"><img
                    :src="user.avatar"
                    alt="">
                </div>
                <div class="ttp-comment-input">
                  <textarea class="comment-textarea" :placeholder="placeholder" v-model="pinglun" ></textarea>
                  <div class="action">
                    <button type="button" class="submit-btn" @click.prevent="pingLunWenZhang()">评论</button>
                  </div>
                </div>
              </div>

              <div class="main-input" v-else>
                <div class="ttp-avatar auth-none"></div>
                <div class="ttp-comment-input">
                  <div class="login-mask">
                    <p>请先
                      <button @click.prevent="loginShow">登录</button>
                      后发表评论～
                    </p>
                  </div>
                  <textarea disabled="" class="comment-textarea" placeholder="说点什么吧..."></textarea>
                  <div class="action">
                    <button type="button" disabled="" class="submit-btn">评论</button>
                  </div>
                </div>
              </div>

              <ul class="comment-list">
                <li v-for="(item,index) in comment" :key="item.id + index">

                  <div class="ttp-comment-item">

                    <!--头像-->
                    <a tabindex="-1" aria-hidden="true"
                       href="/c/user/106463635968/?source=tuwen_detail"
                       rel="nofollow" target="_blank" class="">
                    <div class="ttp-avatar auth-none">
                      <img :src="item.useravatar"
                        alt="">
                    </div>
                  </a>

                    <div class="comment-info">
                      <!--名称-->
                      <div class="header">

                        <div class="user-info">
                          <a href="/c/user/106463635968/?source=tuwen_detail"
                             rel="nofollow" target="_blank">
                          <div class="user-name">
                            <span class="name">{{ item.usernickname }}</span>
                          </div>
                        </a>
                        </div>
                        <!--点赞-->
                        <div class="right-action">
                          <div tabindex="0" role="button"  aria-pressed="false"
                               class="ttp-comment-like">

                            <div class="inner" v-if="item.iszan==0" @click.prevent="likeComment(item,index)">
                              <span class="">{{ item.zannum }}</span>
                              <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                   xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.6547 9.01851L13.0678 8.94922C13.048 9.11689 13.1008 9.28501 13.213 9.41119C13.3251 9.53738 13.4859 9.60957 13.6547 9.60957V9.01851ZM14.0618 5.57064L14.6487 5.63993L14.0618 5.57064ZM9.04306 8.57151L8.52223 8.29208L9.04306 8.57151ZM5.9138 18.7304L5.64546 19.2571L5.9138 18.7304ZM5.03097 17.8476L5.55761 17.5793L5.03097 17.8476ZM18.4092 18.0512L18.901 18.3791L18.4092 18.0512ZM17.5543 18.7741L17.796 19.3135L17.5543 18.7741ZM19.6188 11.9347L19.036 11.8365L19.6188 11.9347ZM19.7277 10.0391L19.1733 10.2442L19.7277 10.0391ZM19.0402 9.22612L18.7459 9.73867L19.0402 9.22612ZM4.81177 10.9756L4.221 10.9572L4.81177 10.9756ZM6.7679 9.0195L6.74946 8.42872L6.7679 9.0195ZM19.036 11.8365L18.308 16.1572L19.4737 16.3536L20.2017 12.0329L19.036 11.8365ZM15.7035 18.3596H8.043V19.5417H15.7035V18.3596ZM5.40185 15.7184V11.1189H4.21973V15.7184H5.40185ZM13.6547 9.60957H17.1529V8.42745H13.6547V9.60957ZM9.5639 8.85094L11.582 5.08933L10.5403 4.53047L8.52223 8.29208L9.5639 8.85094ZM13.4748 5.50135L13.0678 8.94922L14.2417 9.0878L14.6487 5.63993L13.4748 5.50135ZM6.91118 9.60957H8.29598V8.42745H6.91118V9.60957ZM13.0901 4.69329C13.3631 4.86625 13.5126 5.18044 13.4748 5.50135L14.6487 5.63993C14.7399 4.86742 14.3799 4.11109 13.7228 3.69475L13.0901 4.69329ZM8.52223 8.29208C8.47751 8.37544 8.39058 8.42745 8.29598 8.42745V9.60957C8.82611 9.60957 9.31329 9.31808 9.5639 8.85094L8.52223 8.29208ZM8.043 18.3596C7.46756 18.3596 7.07152 18.3591 6.76431 18.334C6.464 18.3095 6.30099 18.2644 6.18214 18.2038L5.64546 19.2571C5.95874 19.4167 6.29464 19.4817 6.66805 19.5122C7.03456 19.5421 7.48706 19.5417 8.043 19.5417V18.3596ZM4.21973 15.7184C4.21973 16.2743 4.21927 16.7268 4.24921 17.0934C4.27972 17.4668 4.34471 17.8027 4.50433 18.1159L5.55761 17.5793C5.49705 17.4604 5.45195 17.2974 5.42741 16.9971C5.40231 16.6899 5.40185 16.2939 5.40185 15.7184H4.21973ZM6.18214 18.2038C5.91324 18.0668 5.69462 17.8482 5.55761 17.5793L4.50433 18.1159C4.75468 18.6073 5.15414 19.0067 5.64546 19.2571L6.18214 18.2038ZM18.308 16.1572C18.2258 16.6448 18.1692 16.9782 18.1056 17.2359C18.0437 17.4863 17.9844 17.6228 17.9175 17.7233L18.901 18.3791C19.0736 18.1203 19.1745 17.8378 19.2531 17.5196C19.33 17.2085 19.3945 16.8237 19.4737 16.3536L18.308 16.1572ZM15.7035 19.5417C16.1802 19.5417 16.5704 19.5421 16.8899 19.5179C17.2167 19.4932 17.5121 19.4407 17.796 19.3135L17.3127 18.2347C17.2025 18.284 17.058 18.3197 16.8008 18.3392C16.5362 18.3592 16.198 18.3596 15.7035 18.3596V19.5417ZM17.9175 17.7233C17.7681 17.9473 17.5584 18.1246 17.3127 18.2347L17.796 19.3135C18.245 19.1124 18.628 18.7884 18.901 18.3791L17.9175 17.7233ZM20.2017 12.0329C20.2844 11.5417 20.3533 11.136 20.38 10.8048C20.4072 10.4682 20.3975 10.146 20.282 9.83395L19.1733 10.2442C19.2025 10.3231 19.2229 10.4471 19.2017 10.7098C19.1801 10.978 19.1222 11.3245 19.036 11.8365L20.2017 12.0329ZM17.1529 9.60957C17.6721 9.60957 18.0234 9.61009 18.2915 9.63332C18.554 9.65607 18.6729 9.69676 18.7459 9.73867L19.3346 8.71357C19.0461 8.54788 18.73 8.48476 18.3935 8.45561C18.0625 8.42693 17.651 8.42745 17.1529 8.42745V9.60957ZM20.282 9.83395C20.1071 9.36113 19.7718 8.96465 19.3346 8.71357L18.7459 9.73867C18.9431 9.85196 19.0944 10.0308 19.1733 10.2442L20.282 9.83395ZM11.582 5.08933C11.8743 4.54443 12.5678 4.36233 13.0901 4.69329L13.7228 3.69475C12.6206 2.99633 11.1572 3.3806 10.5403 4.53047L11.582 5.08933ZM5.40185 11.1189C5.40185 11.0399 5.40193 11.014 5.40255 10.9941L4.221 10.9572C4.21966 11.0002 4.21973 11.0488 4.21973 11.1189H5.40185ZM6.91118 8.42745C6.84112 8.42745 6.7925 8.42738 6.74946 8.42872L6.78634 9.61027C6.8063 9.60965 6.8322 9.60957 6.91118 9.60957V8.42745ZM5.40255 10.9941C5.42609 10.2398 6.03206 9.63381 6.78634 9.61027L6.74946 8.42872C5.37124 8.47174 4.26402 9.57896 4.221 10.9572L5.40255 10.9941Z"
                                      fill="#222222"></path>
                                <path d="M8.37335 9.26562V19.518" stroke="#222222"
                                      stroke-width="1.29874"></path>
                              </svg>
                            </div>

                            <div class="inner liked" v-if="item.iszan==1" @click.prevent="unlikeComment(item,index)"><span class="">{{ item.zannum }}</span>
                              <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                   xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M4.21442 11.3522C4.21442 11.2719 4.21442 11.2317 4.21548 11.1978C4.25135 10.0484 5.17473 9.12502 6.32411 9.08915C6.35807 9.08809 6.39824 9.08809 6.47856 9.08809H7.97134C8.30805 9.08809 8.61748 8.90294 8.77667 8.60624L10.9521 4.55134C11.4422 3.63789 12.6047 3.33263 13.4803 3.88745C13.9816 4.20507 14.2562 4.78207 14.1866 5.3714L13.7479 9.08809H17.5188C18.6153 9.08809 19.1636 9.08809 19.5533 9.31188C19.8952 9.50827 20.1575 9.81838 20.2943 10.1882C20.4503 10.6097 20.3592 11.1503 20.177 12.2316L19.3922 16.8892C19.2183 17.9216 19.1313 18.4377 18.8731 18.825C18.6454 19.1664 18.326 19.4365 17.9515 19.6043C17.5267 19.7946 17.0033 19.7946 15.9564 19.7946H7.69863C6.47904 19.7946 5.86925 19.7946 5.40342 19.5572C4.99368 19.3484 4.66054 19.0153 4.45176 18.6056C4.21442 18.1397 4.21442 17.5299 4.21442 16.3104V11.3522Z"
                                    fill="#F04142"></path>
                                <path d="M7.37381 6.35449V20.5227" stroke="white" stroke-width="1.2"></path>
                              </svg>
                            </div>

                          </div>
                        </div>

                      </div>
                      <!--评论内容-->
                      <div class="body">
                        <p class="content">{{item.content}}</p>
                      </div>
                      <!--回复-->
                      <div class="footer">
                        <div class="left-action">
                          <button class="reply-btn" @click.prevent="huiFuPingLunShow(index)">回复</button>
                          <span class="dot">·</span><span class="time">{{ item.createTime }}</span></div>
                        <div class="right-action">
                          <div tabindex="0" role="button" aria-label="举报"
                               class="ttp-comment-report"><i></i></div>
                        </div>
                      </div>
                      <!--回复评论-->
                      <div class="children-input" v-if="item.pinglunshow && usershow">
                        <div class="ttp-comment-input">
                          <textarea class="comment-textarea" :placeholder="placeholder" v-model="item.pinglun"></textarea>
                          <div class="action">
                            <button type="button" class="submit-btn" @click.prevent="huiFuPingLun(item,index)">评论</button>
                          </div>
                        </div>
                      </div>

                      <div class="children-input" v-if="item.pinglunshow && !usershow">
                        <div class="ttp-comment-input">
                          <div class="login-mask">
                            <p>请先
                              <button @click.prevent="loginShow">登录</button>
                              后发表评论～
                            </p>
                          </div>
                          <textarea disabled="" class="comment-textarea" placeholder="说点什么吧..."></textarea>
                          <div class="action">
                            <button type="button" disabled="" class="submit-btn">评论</button>
                          </div>
                        </div>
                      </div>

                      <!--加载更多-->
                      <button class="check-more-reply" v-if="item.childrenNums > 0 && item.ctotal == 0" @click.prevent="getData(index)">
                        查看全部 {{ item.childrenNums }} 条回复
                      </button>

                      <div class="replay-list" v-show="this.isshow && item.ctotal">

                        <ul>
                          <li v-for="(citem,index) in item.pageChildrens" :key="citem.id + index">
                            <div class="ttp-comment-item">
                              <!--头像-->
                              <a tabindex="-1" aria-hidden="true"
                                 href="/c/user/830880569890067/?source=tuwen_detail"
                                 rel="nofollow" target="_blank"
                                 class="children-reply-avatar">
                                <div class="ttp-avatar auth-none">
                                  <img :src="citem.replyUseravatar"
                                    alt="">
                                </div>
                              </a>

                              <div class="comment-info">
                                <!--名称-->
                                <div class="header">
                                  <div class="user-info"><a
                                      href="/c/user/830880569890067/?source=tuwen_detail"
                                      rel="nofollow" target="_blank">
                                    <div class="user-name"><span
                                        class="name">{{ citem.replyUsernickname }}</span></div>
                                  </a></div>
<!--                                  <div class="right-action">-->
<!--                                    <div tabindex="0" role="button" aria-label="点赞57"-->
<!--                                         aria-pressed="false" class="ttp-comment-like">-->
<!--                                      <div class="inner"><span class="">57</span>-->
<!--                                        <svg width="24" height="24"-->
<!--                                             viewBox="0 0 24 24" fill="none"-->
<!--                                             xmlns="http://www.w3.org/2000/svg">-->
<!--                                          <path d="M13.6547 9.01851L13.0678 8.94922C13.048 9.11689 13.1008 9.28501 13.213 9.41119C13.3251 9.53738 13.4859 9.60957 13.6547 9.60957V9.01851ZM14.0618 5.57064L14.6487 5.63993L14.0618 5.57064ZM9.04306 8.57151L8.52223 8.29208L9.04306 8.57151ZM5.9138 18.7304L5.64546 19.2571L5.9138 18.7304ZM5.03097 17.8476L5.55761 17.5793L5.03097 17.8476ZM18.4092 18.0512L18.901 18.3791L18.4092 18.0512ZM17.5543 18.7741L17.796 19.3135L17.5543 18.7741ZM19.6188 11.9347L19.036 11.8365L19.6188 11.9347ZM19.7277 10.0391L19.1733 10.2442L19.7277 10.0391ZM19.0402 9.22612L18.7459 9.73867L19.0402 9.22612ZM4.81177 10.9756L4.221 10.9572L4.81177 10.9756ZM6.7679 9.0195L6.74946 8.42872L6.7679 9.0195ZM19.036 11.8365L18.308 16.1572L19.4737 16.3536L20.2017 12.0329L19.036 11.8365ZM15.7035 18.3596H8.043V19.5417H15.7035V18.3596ZM5.40185 15.7184V11.1189H4.21973V15.7184H5.40185ZM13.6547 9.60957H17.1529V8.42745H13.6547V9.60957ZM9.5639 8.85094L11.582 5.08933L10.5403 4.53047L8.52223 8.29208L9.5639 8.85094ZM13.4748 5.50135L13.0678 8.94922L14.2417 9.0878L14.6487 5.63993L13.4748 5.50135ZM6.91118 9.60957H8.29598V8.42745H6.91118V9.60957ZM13.0901 4.69329C13.3631 4.86625 13.5126 5.18044 13.4748 5.50135L14.6487 5.63993C14.7399 4.86742 14.3799 4.11109 13.7228 3.69475L13.0901 4.69329ZM8.52223 8.29208C8.47751 8.37544 8.39058 8.42745 8.29598 8.42745V9.60957C8.82611 9.60957 9.31329 9.31808 9.5639 8.85094L8.52223 8.29208ZM8.043 18.3596C7.46756 18.3596 7.07152 18.3591 6.76431 18.334C6.464 18.3095 6.30099 18.2644 6.18214 18.2038L5.64546 19.2571C5.95874 19.4167 6.29464 19.4817 6.66805 19.5122C7.03456 19.5421 7.48706 19.5417 8.043 19.5417V18.3596ZM4.21973 15.7184C4.21973 16.2743 4.21927 16.7268 4.24921 17.0934C4.27972 17.4668 4.34471 17.8027 4.50433 18.1159L5.55761 17.5793C5.49705 17.4604 5.45195 17.2974 5.42741 16.9971C5.40231 16.6899 5.40185 16.2939 5.40185 15.7184H4.21973ZM6.18214 18.2038C5.91324 18.0668 5.69462 17.8482 5.55761 17.5793L4.50433 18.1159C4.75468 18.6073 5.15414 19.0067 5.64546 19.2571L6.18214 18.2038ZM18.308 16.1572C18.2258 16.6448 18.1692 16.9782 18.1056 17.2359C18.0437 17.4863 17.9844 17.6228 17.9175 17.7233L18.901 18.3791C19.0736 18.1203 19.1745 17.8378 19.2531 17.5196C19.33 17.2085 19.3945 16.8237 19.4737 16.3536L18.308 16.1572ZM15.7035 19.5417C16.1802 19.5417 16.5704 19.5421 16.8899 19.5179C17.2167 19.4932 17.5121 19.4407 17.796 19.3135L17.3127 18.2347C17.2025 18.284 17.058 18.3197 16.8008 18.3392C16.5362 18.3592 16.198 18.3596 15.7035 18.3596V19.5417ZM17.9175 17.7233C17.7681 17.9473 17.5584 18.1246 17.3127 18.2347L17.796 19.3135C18.245 19.1124 18.628 18.7884 18.901 18.3791L17.9175 17.7233ZM20.2017 12.0329C20.2844 11.5417 20.3533 11.136 20.38 10.8048C20.4072 10.4682 20.3975 10.146 20.282 9.83395L19.1733 10.2442C19.2025 10.3231 19.2229 10.4471 19.2017 10.7098C19.1801 10.978 19.1222 11.3245 19.036 11.8365L20.2017 12.0329ZM17.1529 9.60957C17.6721 9.60957 18.0234 9.61009 18.2915 9.63332C18.554 9.65607 18.6729 9.69676 18.7459 9.73867L19.3346 8.71357C19.0461 8.54788 18.73 8.48476 18.3935 8.45561C18.0625 8.42693 17.651 8.42745 17.1529 8.42745V9.60957ZM20.282 9.83395C20.1071 9.36113 19.7718 8.96465 19.3346 8.71357L18.7459 9.73867C18.9431 9.85196 19.0944 10.0308 19.1733 10.2442L20.282 9.83395ZM11.582 5.08933C11.8743 4.54443 12.5678 4.36233 13.0901 4.69329L13.7228 3.69475C12.6206 2.99633 11.1572 3.3806 10.5403 4.53047L11.582 5.08933ZM5.40185 11.1189C5.40185 11.0399 5.40193 11.014 5.40255 10.9941L4.221 10.9572C4.21966 11.0002 4.21973 11.0488 4.21973 11.1189H5.40185ZM6.91118 8.42745C6.84112 8.42745 6.7925 8.42738 6.74946 8.42872L6.78634 9.61027C6.8063 9.60965 6.8322 9.60957 6.91118 9.60957V8.42745ZM5.40255 10.9941C5.42609 10.2398 6.03206 9.63381 6.78634 9.61027L6.74946 8.42872C5.37124 8.47174 4.26402 9.57896 4.221 10.9572L5.40255 10.9941Z"-->
<!--                                                fill="#222222"></path>-->
<!--                                          <path d="M8.37335 9.26562V19.518"-->
<!--                                                stroke="#222222"-->
<!--                                                stroke-width="1.29874"></path>-->
<!--                                        </svg>-->
<!--                                      </div>-->
<!--                                    </div>-->
<!--                                  </div>-->
                                </div>
                                <!--评论内容-->
                                <div class="body">
                                  <p class="content">{{citem.content}}</p>
                                </div>
                                <!--回复-->
                                <div class="footer">
                                  <div class="left-action">
<!--                                    <button class="reply-btn">回复</button>
                                    <span class="dot">·</span>-->
                                    <span
                                      class="time">{{ citem.createTime }}</span></div>
                                  <div class="right-action">
                                    <div tabindex="0" role="button" aria-label="举报"
                                         class="ttp-comment-report"><i></i></div>
                                  </div>
                                </div>

                              </div>
                            </div>
                          </li>
                        </ul>
                      </div>

                      <button class="check-more-reply ml"
                              v-if=" this.comment[index].ctotal >= this.comment[index].cpageSize && this.comment[index].cpages >= 2"
                              @click.prevent="getMore(index)" >查看更多回复</button>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <button v-if="total>0 && ismore" class="side-drawer-btn" @click.prevent="getMoree()"><span>查看全部 {{ total }} 条评论</span></button>
          </div>
        </div>
        <div>
          <div class="divide"></div>
        </div>
<!--        <div class="show-monitor">-->
<!--          <div>-->
<!--            <div role="region" aria-label="相关推荐" class="detail-end-feed more-click-area">-->
<!--              <div style="margin-top:20px">-->
<!--                <div class="feed-card-wrapper feed-card-article-wrapper">-->
<!--                  <div class="feed-card-article no-cover">-->
<!--                    <div class="feed-card-article-l"><a-->
<!--                        href="https://www.toutiao.com/article/7079352067394896399/" target="_blank"-->
<!--                        rel="noopener" class="title" aria-label="刘和平：中印联手阻止美西方搞垮俄罗斯？">刘和平：中印联手阻止美西方搞垮俄罗斯？</a>-->
<!--                      <div class="feed-card-footer-cmp">-->
<!--                        <div class="left-tools">-->
<!--                          <div class="feed-card-footer-cmp-author"><a-->
<!--                              href="/c/user/token/MS4wLjABAAAAXFbTTBLFWaOek5q0tg3LZsH6fLKRH6j7ODr7verDM68/?source=tuwen_detail"-->
<!--                              target="_blank" rel="noopener nofollow">直新闻</a></div>-->
<!--                          <div class="feed-card-footer-comment-cmp"><a-->
<!--                              href="https://www.toutiao.com/article/7079352067394896399/#comment"-->
<!--                              target="_blank" rel="noopener nofollow"-->
<!--                              aria-label="评论数60">60评论</a></div>-->
<!--                          <div class="feed-card-footer-time-cmp">4小时前</div>-->
<!--                        </div>-->
<!--                        <div class="right-tools">-->
<!--                          <div class="feed-card-footer-dislike-cmp">-->
<!--                            <div class="dislike-wrapper dislike-button-7079352067394896399"-->
<!--                                 tabindex="0" role="button" aria-haspopup="true"-->
<!--                                 aria-expanded="false"><i class="dislike-icon"></i></div>-->
<!--                            <ul class="dislike-type-list panel-top" role="menu"-->
<!--                                style="display: none;">-->
<!--                              <li>-->
<!--                                <div class="dislike-item icon-uninterested" role="menuitem"-->
<!--                                     tabindex="-1">-->
<!--                                  <div class="dislike-title">不感兴趣</div>-->
<!--                                  <div class="dislike-desc">减少此类内容</div>-->
<!--                                </div>-->
<!--                              </li>-->
<!--                              <li>-->
<!--                                <div class="dislike-type-wrapper report">-->
<!--                                  <div class="dislike-item report-7079352067394896399 icon-report dislike-item-arrow"-->
<!--                                       role="menuitem" tabindex="-1">-->
<!--                                    <div class="dislike-title">举报</div>-->
<!--                                    <div class="dislike-desc">标题夸张、内容质量差等</div>-->
<!--                                  </div>-->
<!--                                  <div class="dislike-type-panel" style="display: none;">-->
<!--                                    <ul>-->
<!--                                      <li>-->
<!--                                        <div class="" role="menuitem" tabindex="-1">-->
<!--                                          标题夸张-->
<!--                                        </div>-->
<!--                                      </li>-->
<!--                                      <li>-->
<!--                                        <div class="" role="menuitem" tabindex="-1">-->
<!--                                          旧闻重复-->
<!--                                        </div>-->
<!--                                      </li>-->
<!--                                      <li>-->
<!--                                        <div class="" role="menuitem" tabindex="-1">-->
<!--                                          封面反感-->
<!--                                        </div>-->
<!--                                      </li>-->
<!--                                      <li>-->
<!--                                        <div class="" role="menuitem" tabindex="-1">-->
<!--                                          内容质量差-->
<!--                                        </div>-->
<!--                                      </li>-->
<!--                                    </ul>-->
<!--                                  </div>-->
<!--                                </div>-->
<!--                              </li>-->
<!--                              <li>-->
<!--                                <div class="dislike-type-wrapper block">-->
<!--                                  <div class="dislike-item icon-block" role="menuitem"-->
<!--                                       tabindex="-1">-->
<!--                                    <div class="dislike-title">拉黑作者</div>-->
<!--                                    <div class="dislike-desc">直新闻</div>-->
<!--                                  </div>-->
<!--                                  <div class="dislike-type-panel" style="display: none;">-->
<!--                                    <div class="dislike-type-panel-container">-->
<!--                                      <div class="dislike-type-panel-title">确定拉黑该用户？-->
<!--                                      </div>-->
<!--                                      <div class="dislike-type-panel-desc">-->
<!--                                        拉黑后此用户不能关注你，也无法给你发送任何消息-->
<!--                                      </div>-->
<!--                                      <div class="dislike-type-panel-button">-->
<!--                                        <button class="dislike-button-cancel"-->
<!--                                                type="button" disabled="">取消-->
<!--                                        </button>-->
<!--                                        <button class="dislike-button-commit"-->
<!--                                                type="button" disabled="">确定-->
<!--                                        </button>-->
<!--                                      </div>-->
<!--                                    </div>-->
<!--                                  </div>-->
<!--                                </div>-->
<!--                              </li>-->
<!--                              <li>-->
<!--                                <div class="dislike-type-wrapper shield">-->
<!--                                  <div class="dislike-item shield-7079352067394896399 icon-shield dislike-item-arrow"-->
<!--                                       role="menuitem" tabindex="-1">-->
<!--                                    <div class="dislike-title">屏蔽</div>-->
<!--                                    <div class="dislike-desc">时政外交、刘和平、俄罗斯</div>-->
<!--                                  </div>-->
<!--                                  <div class="dislike-type-panel" style="display: none;">-->
<!--                                    <ul>-->
<!--                                      <li>-->
<!--                                        <div class="shield-subitem" role="menuitem"-->
<!--                                             tabindex="-1"><span>屏蔽：</span><span>时政外交</span>-->
<!--                                        </div>-->
<!--                                      </li>-->
<!--                                      <li>-->
<!--                                        <div class="shield-subitem" role="menuitem"-->
<!--                                             tabindex="-1">-->
<!--                                          <span>屏蔽：</span><span>刘和平</span></div>-->
<!--                                      </li>-->
<!--                                      <li>-->
<!--                                        <div class="shield-subitem" role="menuitem"-->
<!--                                             tabindex="-1">-->
<!--                                          <span>屏蔽：</span><span>俄罗斯</span></div>-->
<!--                                      </li>-->
<!--                                    </ul>-->
<!--                                  </div>-->
<!--                                </div>-->
<!--                              </li>-->
<!--                            </ul>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="feed-card-wrapper feed-card-article-wrapper">-->
<!--                  <div class="feed-card-article single-cover">-->
<!--                    <div class="feed-card-article-r">-->
<!--                      <div class="feed-card-cover"><a-->
<!--                          href="https://www.toutiao.com/article/7079393115446247949/"-->
<!--                          target="_blank" rel="noopener" title="官宣！C6驾照将“上线”！这类车成“香饽饽”！你打算增驾吗？"-->
<!--                          aria-hidden="false" tabindex="0"><img-->
<!--                          src="//p6.toutiaoimg.com/tos-cn-i-tjoges91tu/T1BxM179blufX~tplv-tt-cs0:640:360.jpg?from=feed&amp;_iz=31826"-->
<!--                          alt=""></a></div>-->
<!--                    </div>-->
<!--                    <div class="feed-card-article-l"><a-->
<!--                        href="https://www.toutiao.com/article/7079393115446247949/" target="_blank"-->
<!--                        rel="noopener" class="title" aria-label="官宣！C6驾照将“上线”！这类车成“香饽饽”！你打算增驾吗？">官宣！C6驾照将“上线”！这类车成“香饽饽”！你打算增驾吗？</a>-->
<!--                      <div class="feed-card-footer-cmp">-->
<!--                        <div class="left-tools">-->
<!--                          <div class="feed-card-footer-cmp-author"><a-->
<!--                              href="/c/user/token/MS4wLjABAAAAvazHMceCo3MeM9IJbll231AC8GkJDcrd__iZFw2hi4o/?source=tuwen_detail"-->
<!--                              target="_blank" rel="noopener nofollow">环球网</a></div>-->
<!--                          <div class="feed-card-footer-comment-cmp"><a-->
<!--                              href="https://www.toutiao.com/article/7079393115446247949/"-->
<!--                              target="_blank" rel="noopener nofollow"-->
<!--                              aria-label="评论数25">25评论</a></div>-->
<!--                          <div class="feed-card-footer-time-cmp">1小时前</div>-->
<!--                        </div>-->
<!--                        <div class="right-tools">-->
<!--                          <div class="feed-card-footer-dislike-cmp">-->
<!--                            <div class="dislike-wrapper dislike-button-7079393115446247949"-->
<!--                                 tabindex="0" role="button" aria-haspopup="true"-->
<!--                                 aria-expanded="false"><i class="dislike-icon"></i></div>-->
<!--                            <ul class="dislike-type-list panel-top" role="menu"-->
<!--                                style="display: none;">-->
<!--                              <li>-->
<!--                                <div class="dislike-item icon-uninterested" role="menuitem"-->
<!--                                     tabindex="-1">-->
<!--                                  <div class="dislike-title">不感兴趣</div>-->
<!--                                  <div class="dislike-desc">减少此类内容</div>-->
<!--                                </div>-->
<!--                              </li>-->
<!--                              <li>-->
<!--                                <div class="dislike-type-wrapper report">-->
<!--                                  <div class="dislike-item report-7079393115446247949 icon-report dislike-item-arrow"-->
<!--                                       role="menuitem" tabindex="-1">-->
<!--                                    <div class="dislike-title">举报</div>-->
<!--                                    <div class="dislike-desc">标题夸张、内容质量差等</div>-->
<!--                                  </div>-->
<!--                                  <div class="dislike-type-panel" style="display: none;">-->
<!--                                    <ul>-->
<!--                                      <li>-->
<!--                                        <div class="" role="menuitem" tabindex="-1">-->
<!--                                          标题夸张-->
<!--                                        </div>-->
<!--                                      </li>-->
<!--                                      <li>-->
<!--                                        <div class="" role="menuitem" tabindex="-1">-->
<!--                                          旧闻重复-->
<!--                                        </div>-->
<!--                                      </li>-->
<!--                                      <li>-->
<!--                                        <div class="" role="menuitem" tabindex="-1">-->
<!--                                          封面反感-->
<!--                                        </div>-->
<!--                                      </li>-->
<!--                                      <li>-->
<!--                                        <div class="" role="menuitem" tabindex="-1">-->
<!--                                          内容质量差-->
<!--                                        </div>-->
<!--                                      </li>-->
<!--                                    </ul>-->
<!--                                  </div>-->
<!--                                </div>-->
<!--                              </li>-->
<!--                              <li>-->
<!--                                <div class="dislike-type-wrapper block">-->
<!--                                  <div class="dislike-item icon-block" role="menuitem"-->
<!--                                       tabindex="-1">-->
<!--                                    <div class="dislike-title">拉黑作者</div>-->
<!--                                    <div class="dislike-desc">环球网</div>-->
<!--                                  </div>-->
<!--                                  <div class="dislike-type-panel" style="display: none;">-->
<!--                                    <div class="dislike-type-panel-container">-->
<!--                                      <div class="dislike-type-panel-title">确定拉黑该用户？-->
<!--                                      </div>-->
<!--                                      <div class="dislike-type-panel-desc">-->
<!--                                        拉黑后此用户不能关注你，也无法给你发送任何消息-->
<!--                                      </div>-->
<!--                                      <div class="dislike-type-panel-button">-->
<!--                                        <button class="dislike-button-cancel"-->
<!--                                                type="button" disabled="">取消-->
<!--                                        </button>-->
<!--                                        <button class="dislike-button-commit"-->
<!--                                                type="button" disabled="">确定-->
<!--                                        </button>-->
<!--                                      </div>-->
<!--                                    </div>-->
<!--                                  </div>-->
<!--                                </div>-->
<!--                              </li>-->
<!--                              <li>-->
<!--                                <div class="dislike-type-wrapper shield">-->
<!--                                  <div class="dislike-item shield-7079393115446247949 icon-shield dislike-item-arrow"-->
<!--                                       role="menuitem" tabindex="-1">-->
<!--                                    <div class="dislike-title">屏蔽</div>-->
<!--                                    <div class="dislike-desc">房车</div>-->
<!--                                  </div>-->
<!--                                  <div class="dislike-type-panel" style="display: none;">-->
<!--                                    <ul>-->
<!--                                      <li>-->
<!--                                        <div class="shield-subitem" role="menuitem"-->
<!--                                             tabindex="-1">-->
<!--                                          <span>屏蔽：</span><span>房车</span></div>-->
<!--                                      </li>-->
<!--                                    </ul>-->
<!--                                  </div>-->
<!--                                </div>-->
<!--                              </li>-->
<!--                            </ul>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
      </div>
      <div class="right-sidebar">
        <div class="show-monitor">
          <div role="complementary" aria-label="作者信息" class="media-info">
            <div class="user-info">
              <a aria-label="作者头像" class="user-avatar" target="_blank" rel="noopener nofollow"
                 href="/c/user/token/MS4wLjABAAAAiAce5qhH31TeuB3UdpFMV8u-uwy2LnoiqI10uZHqAt8/?source=tuwen_detail">
                <img :src=" item.userAvatar " alt="">
                <i class="verified-icon" style="width:16px;height:16px;background-image:url(//p3.toutiaoimg.com/origin/pgc-image/b13dded4c4e948e293e217f95e8565b4)"></i>
              </a>

              <a class="user-name" target="_blank" rel="noopener nofollow"
                href="/c/user/token/MS4wLjABAAAAiAce5qhH31TeuB3UdpFMV8u-uwy2LnoiqI10uZHqAt8/?source=tuwen_detail">
                {{ item.userName }}
              </a>


              <button aria-pressed="false" type="button" class="user-subscribe-wrapper">
                <i class="bui-icon icon-add_small"></i>
                <span>关注</span>
              </button>
            </div>

          </div>
        </div>
        <div class="show-monitor">
          <div role="complementary"  class="detail-hotboard">
            <div style="display: none; width: 298px; height: 515px;"></div>
            <div style="position: static; top: 88px; z-index: 100; transform: none;">
              <div class="ttp-hot-board">
                <div class="title-bar"><h2 class="title">热搜榜</h2>
                  <button type="button" class="refresh" @click.prevent="huanyipi(2,10,false)" v-if="topone">换一换</button>
                  <button type="button" class="refresh" @click.prevent="huanyipi(1,10,true)" v-else>换一换</button>
                </div>
                <ol v-if="topone">
                  <li v-for="(item,index) in top"  :key="item.id + index">
                    <router-link :to="'/detail/'+item.id" target="_blank" rel="noopener" class="article-item">
                      <i class="icon-stick" v-if="index == 0"></i>
                      <span class="news-index num-1" v-else-if="index == 1">{{ index }}</span>
                      <span class="news-index num-2" v-else-if="index == 2">{{ index }}</span>
                      <span class="news-index num-3" v-else-if="index == 3">{{ index }}</span>
                      <span class="news-index num-4" v-else>{{ index }}</span>
                      <p class="news-title" >{{ item.name }}</p>
                      <i class="news-icon hot"></i>
                    </router-link>
                  </li>
                </ol>
                <ol v-else>
                  <li v-for="(item,index) in top"  :key="item.id + index">
                    <router-link :to="'/detail/'+item.id" target="_blank" rel="noopener" class="article-item">
                      <span class="news-index num-4" >1{{ index }}</span>
                      <p class="news-title" >{{ item.name }}</p>

                    </router-link>
                  </li>
                </ol>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>


  <div class="ttp-modal-wrapper ttp-login-modal"
       :class="[ loginshow ? 'modal-show modal-anime-show':'modal-hide modal-anime-hide']">
  <div class="ttp-modal-mask"></div>
    <div role="dialog" aria-modal="true" aria-label="登录后内容更精彩" class="ttp-modal" style="width: 420px;">
      <div class="ttp-modal-header"><span class="ttp-modal-title">登录后内容更精彩</span>
        <button type="button" aria-label="关闭弹窗" class="ttp-modal-close-btn" @click.prevent="loginShow"><i></i></button>
      </div>

      <!--登录-->
      <div class="ttp-modal-body">
        <div id="login_modal_ele">
          <div class="web-login-container">
            <article class="web-login">
              <article class="web-login-union">
                <div class="web-login-union__login">

                  <div class="web-login-union__login__form">
                    <div class="web-login-union__login__form__title">{{ biaoti }}</div>
                    <div class="web-login-union__login__form__content">
                      <article class="web-login-mobile-code">
                        <div class="web-login-mobile-code__mobile-input-wrapper">
                          <div class="web-login-normal-input">

                            <div class="web-login-area-code" v-if="loginway">
                              <div class="web-login-area-code__input-wrapper">
                                <input type="text" class="web-login-area-code__input-wrapper__input" value="+86">
                              </div>
                            </div>

                            <input type="tel" class="web-login-normal-input__input first-focus-el"
                                   ref="username" v-model.trim="user.username"
                                   :placeholder="placeholderl" autocomplete="tel" maxlength="50" tabindex="0">
                          </div>
                        </div>

                        <div class="web-login-mobile-code__code-input-wrapper" v-if="!findpwd">

                          <div class="web-login-button-input">
                            <!--发送验证码-->
                            <span v-if="showText && !pwdlogin" class="web-login-button-input__button-text send-input" tabindex="0" aria-live="off"
                                  :class="[ showText ? '':'web-login-button-input__button-text__disable']"
                                  role="button" @click.prevent="sendCode()">
                              {{ tishi }}</span>
                            <!--发送验证码后60s内不可发送-->
                            <span v-if="!showText && !pwdlogin" class="web-login-button-input__button-text send-input" tabindex="0" aria-live="off"
                                  :class="[ showText ? '':'web-login-button-input__button-text__disable']"
                                  role="button">
                            {{ tishi }}</span>
                            <!--忘记密码-->
                            <span v-if="pwdlogin" class="web-login-button-input__button-text send-input" tabindex="0" aria-live="off"
                                  :class="[ showText ? '':'web-login-button-input__button-text__disable']"
                                  role="button" @click.prevent="wangjimima()">
                            忘记密码</span>

                            <div class="web-login-button-input__input-wrapper send-input">
                              <input name="button-input" class="web-login-button-input__input"
                                     ref="code" v-model.trim="user.code" :type="[ loginway ? 'tel':'password']"
                                     :placeholder="cplaceholder" autocomplete="off" maxlength="50" tabindex="0">
                            </div>

                          </div>
                        </div>

                        <div class="web-login-mobile-code__mobile-input-wrapper" v-if="findpwd">
                          <div class="web-login-normal-input">

                            <input type="password" class="web-login-normal-input__input first-focus-el"
                                   ref="pwd" v-model.trim="user.pwd"
                                   placeholder="输入新密码" autocomplete="tel" maxlength="50" tabindex="0">
                          </div>
                        </div>

                        <div class="web-login-mobile-code__mobile-input-wrapper" v-if="findpwd">
                          <div class="web-login-normal-input">

                            <input type="password" class="web-login-normal-input__input first-focus-el"
                                   ref="pwdtwo" v-model.trim="user.pwdtwo"
                                   placeholder="再次输入新密码" autocomplete="tel" maxlength="50" tabindex="0">
                          </div>
                        </div>


                        <div class="web-login-error" role="alert" aria-relevant="all" tabindex="0" v-show="msgshow">
                          {{info}}
                        </div>

                        <div class="web-login-mobile-code__button-wrapper"  v-if="loginway && !findpwd">
                          <button type="submit" class="web-login-button"  @click.prevent="toLogin">登录</button>
                        </div>

                        <div class="web-login-mobile-code__button-wrapper"  v-if="!loginway && !findpwd">
                          <button type="submit" class="web-login-button"  @click.prevent="toLoginPwd">密码登录</button>
                        </div>

                        <div class="web-login-mobile-code__button-wrapper"  v-if="findpwd">
                          <button type="submit" class="web-login-button"  @click.prevent="toRePwd">提交</button>
                        </div>
                      </article>
                    </div>
                  </div>
                </div>

                <div class="web-login-union__footer">

                  <div class="web-login-other-login-method" v-if="!findpwd">
                    <div class="web-login-other-login-method__text">其他登录</div>
                    <ul class="web-login-other-login-method__list">

                      <li class="web-login-other-login-method__list__item" tabindex="0" aria-label="帐密登录" role="button"
                          v-if="loginway" @click.prevent="loginways">
                        <i class="web-login-other-login-method__list__item__icon web-login-other-login-method__list__item__icon__account_pwd"></i>
                      </li>

                      <li class="web-login-other-login-method__list__item" tabindex="0" aria-label="手机登录" role="button"
                          v-if="!loginway" @click.prevent="loginwayss">
                        <i class="web-login-other-login-method__list__item__icon web-login-other-login-method__list__item__icon__mobile_code"></i>
                      </li>
                    </ul>
                  </div>

                  <div class="web-login-other-login-method" v-if="findpwd">

                    <div class="web-login-other-login-method__text" style="cursor: pointer" @click.prevent="backlogin">返回登录</div>
                  </div>

                  <ul class="web-login-link-list"></ul>
                </div>
              </article>
            </article>
          </div>
        </div>
      </div>

      <div class="ttp-modal-footer"></div>
      <div tabindex="0"></div>
    </div>
  </div>

</template>

<script>

import categoryService from '@/services/articlecategory';
import commentService from '@/services/articlecomment';
import articleService from '@/services/article'
import cache from "@/utils/cache";
import loginService from "@/services/login";
import {debounce} from "@/utils/utils";
import {isEmpty, validPhone} from "@/utils/validate";
export default {
  data() {
    return {
      loginshow:false,//登录显示
      tishi:"获取验证码",// 获取验证码|| 忘记密码
      pwdlogin:false,//是否是密码登录
      findpwd:false,//找回密码
      biaoti:"手机登录",//手机登录 || 账号登录
      loginway:true,//登录方式
      usershow:false,//用户头像和登录按钮控制 是否登录
      userinfo:false,//个人信息页显示
      placeholderl:"请输入手机号",// 登录输入提示
      cplaceholder:"验证码",// 验证码输入提示
      cplaceindex:"",// 验证码输入
      msgshow:false,//错误提示显示
      info: "",   //用于保存登录失败后的提示信息
      second: 60, //默认60秒
      showText: true, //判断短信是否发送


      placeholder:"说点什么吧...",//评论提示
      pinglun:"",//评论内容

      user: {
        code: "",
        pwd:"",
        pwdtwo:"",
        nickname:"",
        avatar:"",
        userId:"",
      },

      pageNo: 1, //当前页码
      pageSize: 3, //每页显示20条数据
      total: 0, //总记录数
      pages: 0,//总页数

      articleId:"",//文章id
      parentId:0,//评论的层级0第一级 1第二级
      ismore:true,//二级评论
      isshow:false,//二级评论
      parentIndex:-1,//评论的索引

      comment: {
        cpageNo: 1, //二级 当前页码
        cpageSize: 2, //二级 每页显示20条数据
        ctotal: 0, //二级 总记录数
        cpages: 0,//二级 总页数
      },//评论

      item:{},//文章信息

      citems:{},//分类
      keyword:"",//关键字
      cindex: -1, // 用控制选择分类的选中和激活

      top:"",//热门文章
      topone:true,//换一匹

      iszan:false,//是否赞
      isshou:false,//是否收藏
    }
  },
  created() {
    this.articleId = this.$route.params.id;
    this.loadCategoires();
    this.getArticle();
    this.loadArticleComment();
    this.findArticleTop(1,10)
    this.dianzandebounce = debounce(this.cdianzan, 500,true)
    this.quxiaodianzandebounce = debounce(this.cquxiaodianzan, 500,true)
    this.shoucangdebounce = debounce(this.cshoucang, 500,true)
    this.quxiaoshoucangdebounce = debounce(this.cquxiaoshoucang, 500,true)
  },
  watch: {
    // 监听提示
    info: function () {
      // 清除上一次的定时器，如果不清楚自己去看效果，就会造成效果叠加
      if (this.stimer) clearInterval(this.stimer);
      // this.stimer是定时器对象，就是用来关闭用的
      this.stimer = setInterval(() => {
        this.msgshow = false;
      }, 2000)
    }
  },

  methods: {
    //返回登录
    backlogin(){
      this.findpwd = false
      this.biaoti = "账号登录"
    },
    //忘记密码
    wangjimima(){
      this.findpwd = true //切换至找回密码
      this.biaoti = "重置密码"
    },

    //取消收藏文章
    quxiaoshoucang(){
      this.quxiaoshoucangdebounce()
    },
    cquxiaoshoucang(){

      const articleid = this.articleId
      articleService.articleCollectMius(articleid).then(()=>{
        this.isshou =false
      })
    },
    //收藏文章
    shoucang(){
      this.shoucangdebounce()
    },
    cshoucang(){
      //如果没有登录弹出登录框
      if(!this.usershow){
        this.loginShow()
        return
      }
      const articleid = this.articleId
      articleService.articleCollectPlus(articleid).then(()=>{
        this.isshou =true
      })
    },
    //取消点赞文章
    quxiaodianzan(){
      this.quxiaodianzandebounce()

    },
    cquxiaodianzan(){
      const articleid = this.articleId
      articleService.articleZanMius(articleid).then(()=>{
        this.iszan =false
        this.item.zannum = this.item.zannum - 1
      })
    },
    //点赞文章
    dianzan(){
      this.dianzandebounce()
    },
    cdianzan(){
      //如果没有登录弹出登录框
      if(!this.usershow){
        this.loginShow()
        return
      }
      const articleid = this.articleId
      articleService.articleZanPlus(articleid).then(()=>{
        this.iszan =true
        this.item.zannum = this.item.zannum + 1
      })
    },
    //换一匹
    huanyipi(pageNo,pageSize,float){
      this.top=[]
      this.findArticleTop(pageNo,pageSize)
      this.topone = float
    },
    //获取热门文章
    findArticleTop(pageNo,pageSize){
      const params = {
        pageNo: pageNo,
        pageSize: pageSize,
      };
      articleService.findArticleTop(params).then(res => {
        this.top = res.data
      })
    },
    //评论点赞
    likeComment(item,index){
      //如果没有登录弹出登录框
      if(!this.usershow){
        this.loginShow()
        return
      }
      commentService.likeComment(item.id)
      this.comment[index].iszan = 1;
      this.comment[index].zannum = this.comment[index].zannum + 1;
    },
    //评论取消点赞
    unlikeComment(item,index){
      commentService.unLikeComment(item.id)
      this.comment[index].iszan = 0;
      this.comment[index].zannum = this.comment[index].zannum - 1;
    },
    //回复文章
    pingLunWenZhang(){
      this.parentIndex = -1

      const params = {
        //isDelete: this.isDelete,
        //status: this.status,
        articleId: this.articleId,
        content: this.pinglun,
        parentId: this.parentId
      };
      this.saveArticleComment(params)
    },
    //回复评论显示
    huiFuPingLunShow(index){
      this.parentIndex = index
      this.comment[this.parentIndex].pinglunshow = ! this.comment[this.parentIndex].pinglunshow
    },
    //回复评论
    huiFuPingLun(item,index){
      this.parentIndex = index
      //this.comment[index].cpageSize =  this.comment[index].cpages
      if(this.comment[this.parentIndex].ctotal==0){
        this.getData(index)
      }
      this.parentId = item.id
      const params = {
        //isDelete: this.isDelete,
        //status: this.status,
        articleId: this.articleId,
        content: this.comment[index].pinglun,
        parentId: this.parentId
      };
      this.saveArticleComment(params)

    },
    //保存评论
    saveArticleComment(params){
      commentService.saveArticleComment(params).then(res => {
        if (res.status == 200) {
          var commentInfo = res.data;
          this.total = this.total+1;
          if(this.parentIndex>-1){
            this.comment[this.parentIndex].pageChildrens.unshift(commentInfo);
            this.comment[this.parentIndex].ctotal = this.comment[this.parentIndex].ctotal + 1
            this.comment[this.parentIndex].pinglunshow = ! this.comment[this.parentIndex].pinglunshow
            this.comment[this.parentIndex].pinglun = "";
          }else {
            this.comment.unshift(commentInfo);
          }
          //重置原来状态
          this.parentId = 0;
          this.parentIndex = -1;
          this.placeholder = "请输入评论内容...";
          this.pinglun = "";
        }
      })
    },
    //个人信息页显示
    userInfo(){
      this.userinfo = !this.userinfo
    },
    //获取文章信息
    getArticle(){
      this.user.avatar = cache.local.get("avatar")
      this.user.nickname = cache.local.get("nickname")
      this.user.userId = cache.local.get("userid")
      if(this.user.avatar){
        this.usershow = true
      }
      var articleId = this.articleId
      articleService.getArticle(articleId).then(res => {
        if (res.status == 200) {
          var arr = res.data;
          this.item = arr;
          this.iszan = this.item.iszan
          this.isshou = this.item.isshoucang
        }
      })
    },
    //获取分类数据
    loadCategoires() {
      categoryService.findArticleCategories().then(res => {
        if (res.status == 200) {
          var arr = res.data;
          this.citems = arr;
        }
      })
    },
    // 根据分类返回首页
    searchByCid(index){
      let cid =  index != -1 ? this.citems[index].id : "";
      this.$router.push({name:"index",
          params: {
            index: index,
            cid: cid
          }
        },)
    },
    // 搜索返回首页
    searchData() {
      this.$router.push({
        name: "index",
        params: {
          keyword: this.keyword,
        }
      },)
    },
    // 获取评论
    loadArticleComment(){
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        //isDelete: this.isDelete,
        //status: this.status,
        articleId: this.articleId,
        parentId: this.parentId
      };
      commentService.loadArticleComment(params).then(res => {
        if (res.status == 200) {

          const {total, pages, records} = res.data;
          this.comment = records;
          // 分页要进行渲染
          this.total = total;
          // 总页数，后续可以判断边界
          this.pages = pages;
        }
      })
    },
    //获取二级评论
    loadArticleCommentChild(index){
      const params = {
        pageNo: this.comment[index].cpageNo,
        //pageSize: this.comment[index].cpageSize,
        pageSize: this.comment[index].cpageSize,
        //isDelete: this.isDelete,
        //status: this.status,
        articleId: this.articleId,
        parentId: this.comment[index].id
      };
      commentService.loadArticleCommentChild(params).then(res => {
        if (res.status == 200) {
          const {total, pages, records} = res.data;
          this.comment[index].pageChildrens = records;
          // 分页要进行渲染
          this.comment[index].ctotal = total;
          // 总页数，后续可以判断边界
          this.comment[index].cpages = pages;

        }
      })
    },
    //加载更多评论
    getMoree(){
      if(this.pageNo < this.pages)
      {
        this.pageNo = this.pageNo+1
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          //isDelete: this.isDelete,
          //status: this.status,
          articleId: this.articleId,
          parentId: 0
        };
        commentService.loadArticleComment(params).then(res => {
          if (res.status == 200) {
            const {records} = res.data;
            this.comment = this.comment.concat(records);
          }
        })
      }
      if(this.pageNo >= this.pages)
      {
        this.ismore = false
      }
    },
   //显示二级评论
    getData(index){
      this.isshow = true;
      this.loadArticleCommentChild(index);
    },
    //二级评论加载更多
    getMore(index){
      if(this.comment[index].cpageNo < this.comment[index].cpages)
      {
        this.comment[index].cpageNo = this.comment[index].cpageNo+1
        const params = {
          pageNo: this.comment[index].cpageNo,
          pageSize: this.comment[index].cpageSize,
          //isDelete: this.isDelete,
          //status: this.status,
          articleId: this.articleId,
          parentId: this.comment[index].id
        };
        commentService.loadArticleCommentChild(params).then(res => {
        if (res.status == 200) {
          const {records} = res.data;
          this.comment[index].pageChildrens = this.comment[index].pageChildrens.concat(records);
        }
      })
      }
      if(this.comment[index].cpageNo >= this.comment[index].cpages)
      {
        this.comment[index].cpages = 1
      }

    },
    //节流防抖获取验证码
    sendCode(){
      debounce(this.getCode(),500,true)
    },
    //获取验证码
    async getCode(){
      var that = this;
      var phone = this.user.username;
      if (isEmpty(phone)) {
        this.msgshow = true;
        this.info = "手机号不能为空";
        this.$refs.username.focus();
        return;
      }

      if (!validPhone(phone)) {
        this.msgshow = true;
        this.info = "请输入正确的手机格式";
        this.$refs.username.focus();
        return;
      }

      that.showText = false;
      that.tishi = that.second +"s后重新发送";

      // 每隔一秒钟执行一次，形成倒计时
      var interval = setInterval(() => {
        that.showText = false;
        var times = that.second - 1;
        that.second = times;
        that.tishi = times+"s后重新发送";
      }, 1000);

      // 每隔60000(一分钟)执行一次恢复
      setTimeout(() => {
        clearInterval(interval);
        that.second = 60;
        that.showText = true;
        that.tishi = "获取验证码";
      }, 60000);
      // 异步执行发送短信
      try{
        const res = await loginService.sendPhoneCode(phone);
        if(res.data == "success"){
          console.log("短信发送成功")
        }
      }catch(e){

      }
    },
    //退出登录
    async loginOut(){
      this.usershow = !this.usershow
      cache.local.remove("token");
      cache.local.remove("userid");
      cache.local.remove("avatar");
      cache.local.remove("nickname");
      cache.local.remove("userinfo");

      const params = {
        userId: this.user.userId
      };
      try{
        await  loginService.toLoginOut(params);
        console.log("退出成功")
        this.$router.push({
          name: "index",
        })

      }catch(e){

      }

    },
    //登录显示
    loginShow(){
      this.loginshow = !this.loginshow
    },
    //登录方式选择切换
    loginways(){
      this.loginway = !this.loginway
      //this.tishi = "忘记密码"
      this.pwdlogin = true
      this.biaoti = "账号登录"
      this.placeholderl = "手机号/邮箱"
      this.cplaceholder = "密码"

    },
    loginwayss(){
      this.loginway = !this.loginway
      //this.tishi = "获取验证码"
      this.pwdlogin = false
      this.biaoti = "手机登录"
      this.placeholderl = "请输入手机号"
      this.cplaceholder = "验证码"
    },
    // 登录逻辑
    async toLogin() {
      this.msgshow = false;
      var that = this;
      var phone = that.user.username;
      var smscode = that.user.code;
      if (isEmpty(this.user.username)) {
        this.msgshow = true;
        this.info = "手机号不能为空";
        this.$refs.username.focus();
        return;
      }

      if (!validPhone(this.user.username)) {
        this.msgshow = true;
        this.info = "请输入正确的手机格式";
        this.$refs.username.focus();
        return;
      }

      if (isEmpty(this.user.code)) {
        this.msgshow = true;
        this.info = "请输入验证码";
        this.$refs.code.focus();
        return;
      }

      try{
        // 执行登录服务异步处理
        const res =  await loginService.toLoginReg({phone,smscode})
        // 把服务返回的用户信息和token写入到缓存和全局对象globalData中
        cache.local.set("token",res.data.token);
        cache.local.set("userid",res.data.userId);
        cache.local.set("avatar",res.data.avatar);
        cache.local.set("nickname",res.data.nickname);
        cache.local.set("userinfo",JSON.stringify(res.data));
        this.loginshow = !this.loginshow
        this.usershow = !this.usershow
        this.user.avatar = res.data.avatar
        this.user.nickname = res.data.nickname
        window.location.reload();
      }catch(e){
        this.msgshow = true;
        this.info = e.msg
        //如果你要处理写
      }
    },
    // 密码登录逻辑
    async toLoginPwd() {
      this.msgshow = false;
      var that = this;
      var phone = that.user.username;
      var password = that.user.code;
      if (isEmpty(this.user.username)) {
        this.msgshow = true;
        this.info = "账号不能为空";
        this.$refs.username.focus();
        return;
      }

      if (isEmpty(this.user.code)) {
        this.msgshow = true;
        this.info = "密码不能为空";
        this.$refs.code.focus();
        return;
      }

      try{
        // 执行登录服务异步处理
        const res =  await loginService.toLoginPwd({phone,password})
        // 把服务返回的用户信息和token写入到缓存和全局对象globalData中
        cache.local.set("token",res.data.token);
        cache.local.set("userid",res.data.userId);
        cache.local.set("avatar",res.data.avatar);
        cache.local.set("nickname",res.data.nickname);
        cache.local.set("userinfo",JSON.stringify(res.data));
        this.loginshow = !this.loginshow
        this.usershow = !this.usershow
        this.user.avatar = res.data.avatar
        this.user.nickname = res.data.nickname
        window.location.reload();
      }catch(e){
        this.msgshow = true;
        this.info = e.msg
        //如果你要处理写
      }
    },
    //重置密码
    async toRePwd(){
      this.msgshow = false;
      var that = this;
      var phone = that.user.username;
      var password = that.user.pwd;

      if (isEmpty(this.user.username)) {
        this.msgshow = true;
        this.info = "账号不能为空";
        this.$refs.username.focus();
        return;
      }

      if (isEmpty(this.user.pwd)) {
        this.msgshow = true;
        this.info = "新密码不能为空";
        this.$refs.pwd.focus();
        return;
      }

      if (isEmpty(this.user.pwdtwo)) {
        this.msgshow = true;
        this.info = "密码确认不能为空";
        this.$refs.pwdtwo.focus();
        return;
      }

      if (this.user.pwd != this.user.pwdtwo) {
        this.msgshow = true;
        this.info = "两次密码不一致";
        this.$refs.pwd.focus();
        return;
      }

      try{
        // 执行登录服务异步处理
        await loginService.toRePwd({phone,password})
        this.findpwd = !this.findpwd
        //window.location.reload();
      }catch(e){
        this.msgshow = true;
        this.info = e.msg
        //如果你要处理写
      }

    },
  },

}
</script>

<style scoped>
@import '~@/assets/css/detail.css';
@import '~@/assets/css/vendor.css';
@import '~@/assets/css/index.css';
@import '~@/assets/css/login.css';
</style>
